<template>
  <el-scrollbar>
    <div class="page-login-wrap">
      <div class="login-content">
        <div class="login-left">
          <div class="logo-box">
            <!-- <img src="@/assets/svgs/logo.svg" alt="" /> -->
            <span>{{ settings.title }}</span>
          </div>
          <div class="welcome-box">
            <TransitionGroup
              appear
              tag="div"
              enter-active-class="animate__animated animate__bounceInLeft"
            >
              <img src="@/assets/svgs/login-box-bg.svg" key="1" alt="" />
              <div class="text" key="2">欢迎使用本系统</div>
            </TransitionGroup>
          </div>
        </div>
        <div class="login-right">
          <Transition appear enter-active-class="animate__animated animate__bounceInRight">
            <div class="login-form-box">
              <h2 class="page-title">登录</h2>
              <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                :rules="rules"
                class="ruleForm"
                label-position="top"
              >
                <el-form-item label="账号" prop="phoneNo">
                  <el-input
                    v-model="ruleForm.phoneNo"
                    size="large"
                    placeholder="请输入用户账号"
                    clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                  <el-input
                    v-model="ruleForm.password"
                    type="password"
                    show-password
                    size="large"
                    clearable
                    placeholder="请输入密码"
                    @keyup.enter="loginSubmit"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <div style="display: flex; justify-content: flex-end; width: 100%">
                    <el-link :underline="false" type="primary" @click="toForgetPassword">
                      忘记密码
                    </el-link>
                  </div>
                </el-form-item>
                <el-form-item>
                  <div style="width: 100%">
                    <el-button
                      v-loading="isLoading"
                      type="primary"
                      size="large"
                      style="width: 100%"
                      @click="loginSubmit"
                    >
                      登录
                    </el-button>
                  </div>
                  <div style="margin-top: 20px; width: 100%">
                    <el-button size="large" style="width: 100%" @click="toRegister">
                      注册
                    </el-button>
                  </div>
                </el-form-item>
              </el-form>
            </div>
          </Transition>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import settings from '@/utils/settings'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { loginApi } from '@/api/login'
import { useLoading } from '@/hooks/loading'
const { isLoading, startLoading, endLoading } = useLoading()

const router = useRouter()

const validPhoneNoPass = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入账号'))
    return
  }
  callback()
}

const rules = {
  phoneNo: [
    {
      required: true,
      validator: validPhoneNoPass,
      trigger: 'blur'
    }
  ],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
}

const ruleForm = ref({})
const ruleFormRef = ref()

const loginSubmit = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      startLoading()
      const res = await loginApi({
        ...ruleForm.value
      })
      endLoading()
      if (res && res.code === 200) {
        const userinfo = res.body
        if (userinfo.status === 2) {
          ElMessage.error('用户已被禁止登录！')
          return
        }
        if (userinfo.status === 4) {
          ElMessage.error('用户已注销！')
          return
        }
        localStorage.setItem('userinfo', JSON.stringify(userinfo))
        ElMessage.success('登录成功！')
        if (userinfo.userType === 1) {
          router.replace('/web')
        } else {
          router.replace('/admin')
        }
      }
    }
  })
}

const toForgetPassword = () => {
  router.replace('/forgetPassword')
}
const toRegister = () => {
  router.replace('/register')
}
</script>

<style scoped lang="less">
.page-login-wrap {
  height: 100%;
  position: relative;
  background: var(--login-bg-color);
  .login-content {
    position: relative;
    display: flex;
    min-height: 100vh;
    .login-left {
      padding: 30px;
      width: 50%;
      box-sizing: border-box;
      .logo-box {
        display: flex;
        align-items: center;
        position: relative;
        color: #fff;
        img {
          width: 48px;
          height: 48px;
          margin-right: 10px;
        }
        span {
          font-size: 20px;
          font-weight: bold;
        }
      }
      .welcome-box {
        display: flex;
        justify-content: center;
        align-items: center;
        height: calc(100% - 60px);
        img {
          width: 350px;
        }
        .text {
          color: #fff;
          font-size: 30px;
        }
      }
    }
    .login-right {
      flex: 1;
      min-height: 100%;
      background: #fff;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .login-form-box {
        width: 500px;
        margin: 0 auto;
        padding: 20px;
        box-sizing: border-box;
        h2 {
          font-size: 24px;
          text-align: center;
        }
      }
    }
  }
}
</style>
